<template>
  <view class="home-banner">
    <!-- 左侧轮播图 -->
    <view class="banner-left">
      <ad-swipers :pid="33" height="480rpx"></ad-swipers>
    </view>

    <!-- 右侧活动区 -->
    <view class="banner-right">
      <!-- 限时秒杀 -->
      <view class="activity-item seckill" @tap.stop="goPages('/bundle/pages/goods_seckill/goods_seckill', '')">
        <!-- <view class="activity-top">
          <view class="flex-col">
            <view class="title">限时秒杀</view>
            <view class="time">
              <text>距结束</text>
              <text class="time-box">12:34:56</text>
            </view>
          </view>
          <view class="more" @tap.stop="goPages('/bundle/pages/goods_seckill/goods_seckill', '')">更多</view>
        </view> -->
        <!-- 秒杀开始 -->
        <!-- <swiper class="seckill-swiper" :vertical="true" :circular="true" :autoplay="false" :interval="3000"
          :duration="500" :display-multiple-items="1" @change="onSwiperChange">
          <swiper-item v-for="(chunk, index) in seckillProductChunks" :key="index">
            <view class="product-row">
              <view class="product" v-for="(product, pIndex) in chunk" :key="pIndex"
                @tap="goPages('/pages/goods_details/goods_details', { id: product.goods_id || product.id })">
                <image :src="product.goods_image" mode="aspectFit"></image>
                <text class="price">¥{{ product.seckill_price }}</text>
              </view>
            </view>
          </swiper-item>
        </swiper> -->
        <!-- 秒杀结束 -->
      </view>

      <!-- 底部两个活动 -->
      <!-- <view class="activity-title">{{ item.name }}</view> -->
      <view class="bottom-activities" @tap="goPages('/bundle/pages/activity_detail/activity_detail')">
        <!-- <view class="activity-item vip" v-for="(item, index) in activityArea" :key="index"
          @tap="goPages('/bundle/pages/activity_detail/activity_detail', { name: item.name, title: item.title, id: item.id })">
          <view class="con line2">{{ item.title }}</view>
          <image class="activity-img" :src="item.image" mode="aspectFit"></image>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'home-banner',
  props: {
    activityArea: {
      type: Array,
      default: () => ([])
    },
    seckillGoods: {
      type: Array,
      default: () => ([])
    },
  },
  data() {
    return {
      currentSwiperIndex: 0,
      swiperList: [
        {
          image: '/static/images/banner1.jpg',
          price: '3.8',
          title: '拉尼娜红酒',
          couponPrice: '15.9',
          tag: 'GO'
        },
        {
          image: '/static/images/banner2.jpg',
          price: '5.9',
          title: '法国进口红酒',
          couponPrice: '19.9',
          tag: 'HOT'
        }
      ]
    }
  },
  // #ifdef MP
  options: {
    styleIsolation: 'apply-shared'
  },
  // #endif
  mounted() {
    // 兼容性处理

  },
  computed: {
    // 将商品数据每2个分为一组
    seckillProductChunks() {
      const chunks = [];

      if (this.seckillGoods == undefined) return [];
      for (let i = 0; i < this.seckillGoods.length; i += 2) {

        chunks.push(this.seckillGoods.slice(i, i + 2));
      }
      return chunks;
    },
    // 格式化倒计时
    formatTime() {
      const { hours, minutes, seconds } = this.countdown;
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
  },
  methods: {

    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },
    goPages(path, query) {
      this.$Router.push({
        path: path,
        query: query
      })
      return
    }
  }
}
</script>

<style lang="scss">
.home-banner {
  display: flex;
  padding: 20rpx 0;
  background-color: #f5f5f5;
  box-sizing: border-box;
  margin-top: 10rpx;

  /* #ifndef APP-NVUE */
  &::after {
    content: "";
    display: table;
    clear: both;
  }

  /* #endif */

  .banner-left {
    width: 339rpx;
    height: 480rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-right: 20rpx;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #FFF1F1;

        .swiper-bg {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }

        .content {
          position: absolute;
          left: 20rpx;
          bottom: 30rpx;
          z-index: 1;

          .price {
            display: flex;
            align-items: baseline;

            .number {
              color: #E4393C;
              font-size: 60rpx;
              font-weight: bold;
            }

            .unit {
              color: #333;
              font-size: 28rpx;
              margin-left: 4rpx;
            }
          }

          .subtitle {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 24rpx;
            margin-top: 10rpx;

            .tag {
              background-color: #333;
              color: #fff;
              font-size: 20rpx;
              padding: 2rpx 8rpx;
              border-radius: 4rpx;
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }

  .banner-right {
    flex: 1;
    display: flex;
    flex-direction: column;

    .activity-item {
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;

      &.seckill {
        height: 232rpx;
        margin-bottom: 10rpx;
        // background: linear-gradient(#FFE8E8 0, #fff 30%);
        background-image: url(../../static/images/new_goods.png);
        background-repeat: no-repeat;
        background-size: 348rpx 232rpx;
        // margin: 0;

        .activity-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 20rpx;
          // background-color: #FFE8E8;

          .title {
            color: #E4393C;
            font-size: 24rpx;
            font-weight: bold;
          }

          .time {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #fff;
            border: #E4393C 1px solid;
            background-color: #E4393C;
            padding: 0 4rpx;

            .time-box {
              color: #E4393C;
              margin-left: 6rpx;
              background-color: #fff;
            }
          }

          .more {
            color: #fff;
            background-color: #E4393C;
            ;
            font-size: 20rpx;
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
          }
        }

        .seckill-swiper {
          flex: 1;
          height: 210rpx;
        }

        .product-row {
          display: flex;
          justify-content: space-around;
          align-items: center;
          // height: 210rpx;

          .product {
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
              width: 120rpx;
              height: 120rpx;
            }

            .price {
              font-size: 20rpx;
              color: #E4393C;
              font-weight: bold;
              margin-top: 4rpx;
            }
          }
        }
      }
    }

    .bottom-activities {
      // display: flex;
      height: 230rpx;
      //background: linear-gradient(#FFE8E8 0, #fff 30%);
      background-image: url(../../static/images/new_goods2.png);
      background-repeat: no-repeat;
      background-size: 348rpx 230rpx;
      margin-top: 11rpx;

      .activity-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        &:first-child {
          margin-right: 20rpx;
        }

        .activity-title {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
          font-size: 24rpx;
          font-weight: bold;
        }

        .activity-img {
          width: 80%;
          height: 80%;
          /* #ifndef APP-NVUE */
          object-fit: contain;
          /* #endif */
        }

        &.vip {
          background-color: unset;

          .activity-title {
            color: #000;
          }
        }

        &.new-user {
          background-color: unset;

          .activity-title {
            color: #E4393C;
          }
        }
      }
    }
  }
}

/* 兼容不同平台的样式调整 */
/* #ifdef MP-ALIPAY */
.home-banner {
  /* 支付宝小程序特定样式 */
}

/* #endif */

/* #ifdef MP-WEIXIN */
.home-banner {
  /* 微信小程序特定样式 */
}

/* #endif */

/* #ifdef APP-PLUS */
.home-banner {
  /* App特定样式 */
}

/* #endif */

/* #ifdef H5 */
.home-banner {
  /* H5特定样式 */
}

/* #endif */
</style>